<!-- 回到顶部的按钮 -->
<template>

	<!-- :style="{'z-index':mOption.zIndex, 'left': left, 'right': right, 'bottom':addUnit(mOption.bottom), 'width':addUnit(mOption.width), 'border-radius':addUnit(mOption.radius)}" -->
	<image v-if="mOption.src" class="mescroll-totop"
		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-safe-bottom': mOption.safearea}]" style="    z-index: 9990;
    left: auto;
    right: 14px;
    bottom: 66px;
    width: 30px;
    border-radius: 50%;
    height: 30px;" :src="mOption.src" mode="widthFix" @click="toTopClick" />
</template>

<script>
	export default {
		props: {
			// up.toTop的配置项
			option: Object,
			// 是否显示
			value: false
		},
		computed: {
			// 支付宝小程序需写成计算属性,prop定义default仍报错
			mOption() {
				return this.option || {}
			},
			// 优先显示左边
			left() {
				return this.mOption.left ? this.addUnit(this.mOption.left) : 'auto';
			},
			// 右边距离 (优先显示左边)
			right() {
				return this.mOption.left ? 'auto' : this.addUnit(this.mOption.right);
			}
		},
		methods: {
			addUnit(num) {
				if (!num) return 0;
				if (typeof num === 'number') return num + 'rpx';
				return num
			},
			toTopClick() {
				this.$emit('input', false); // 使v-model生效
				this.$emit('click'); // 派发点击事件
			}
		}
	};
</script>

<style>
	/* 回到顶部的按钮 */
	.mescroll-totop {
		z-index: 9990;
		position: fixed !important;
		/* 加上important避免编译到H5,在多mescroll中定位失效 */
		right: 20rpx;
		bottom: 120rpx;
		width: 72rpx;
		height: auto;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.5s;
		/* 过渡 */
		margin-bottom: var(--window-bottom);
		/* css变量 */
	}

	/* 适配 iPhoneX */
	.mescroll-safe-bottom {
		margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
		/* window-bottom + 适配 iPhoneX */
		margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
	}

	/* 显示 -- 淡入 */
	.mescroll-totop-in {
		opacity: 1;
	}

	/* 隐藏 -- 淡出且不接收事件*/
	.mescroll-totop-out {
		opacity: 0;
		pointer-events: none;
	}
</style>